<template>
    <div class="statis-model">
      <div class="statis-container" v-show="currentType==1">
        <div class="statis-num full" >
          <div class="statis-num_cell">
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.total_amount}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">总交易</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.today_amount}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">今日交易</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.yesterday_amount}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">昨日交易</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.catched_amount}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">抓中金额</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.catch_amount}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">换购金额</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.exchange_amount}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">兑换金额</div>
            </div>
          </div>
          <div class="statis-num_cell">
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.total_income}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">总收入额</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.today_income}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">今日收入</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.yesterday_income}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">昨日收入</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.total_profit}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">总利润额</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.today_profit}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">今日利润</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.yesterday_profit}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">昨日利润</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{total_situation.spell_amount}}</div>
                <div class="unit">元</div>
              </div>
              <div class="des">拼团金额</div>
            </div>
          </div>
        </div>
        <div class="table-box">
          <el-table :data="transactionList">
            <el-table-column label="日期" prop="date"></el-table-column>
            <el-table-column label="抓中金额" prop="catch_money"></el-table-column>
            <el-table-column label="换购金额" prop="change_purchase_money"></el-table-column>
            <el-table-column label="兑换金额" prop="exchange_money"></el-table-column>
            <el-table-column label="总金额" prop="total_money"></el-table-column>
            <el-table-column label="收入金额" prop="income_money"></el-table-column>
            <el-table-column label="利润金额" prop="profit_money"></el-table-column>
            <el-table-column label="拼团金额" prop="spell_money"></el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="transactionPageChange"
            :current-page.sync="transaction_current_page"
            :page-sizes="pageSizeArray"
            :page-size="10"
            layout="sizes, prev, pager, next"
            :total="transaction_total_count">
          </el-pagination>
          </div>
      </div>

      <div class="statis-container" v-show="currentType==2">
        <div class="statis-num">
          <div class="statis-num_cell">
            <div class="data general">
              <div class="statis">
                <div class="price">{{order_total_count}}</div>
              </div>
              <div class="des">总订单数</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{order_today_count}}</div>
              </div>
              <div class="des">今日订单</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{order_yesterday_count}}</div>
              </div>
              <div class="des">昨日订单</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{order_cached_count}}</div>
              </div>
              <div class="des">抓中订单</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{order_catch_countt}}</div>
              </div>
              <div class="des">换购订单</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{order_exchange_count}}</div>
              </div>
              <div class="des">兑换订单</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{spell_count}}</div>
              </div>
              <div class="des">拼团订单</div>
            </div>
          </div>
        </div>
        <div class="search-box">
          <div class="labelName lf">商品ID：</div>
          <el-input class="elInput lf" v-model="goods_id"></el-input>
          <div class="labelName lf">商品名称：</div>
          <el-input class="elInput lf" v-model="goods_name"></el-input>
          <el-button class="lf" type="primary" @click="searchData()">查询</el-button>
        </div>

        <div class="table-box">
          <el-table ref="orderTableRef" :data="goodsList"  @sort-change="onSortChange">
            <el-table-column width="250" label="商品">
              <template slot-scope="scope">
                <div class="goodsDetail clearfix">
                  <div class="previewImg lf">
                    <img :src="scope.row.image" alt="">
                  </div>
                  <div class="goodsName lf">
                    {{scope.row.goods_name}}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="浏览量（PV）" prop="pv" sortable="custom"></el-table-column>
            <el-table-column label="访客数（UV）" prop="uv" sortable="custom"></el-table-column>
            <el-table-column label="总抓取数（PV）" prop="catch_pv" sortable="custom"></el-table-column>
            <el-table-column label="总抓取人数（UV）" prop="catch_uv" sortable="custom"></el-table-column>
            <el-table-column label="抓中订单" prop="catch_orders" sortable="custom"></el-table-column>
            <el-table-column label="换购订单" prop="change_purchase_orders" sortable="custom" width="110px;"></el-table-column>
            <el-table-column label="兑换订单" prop="exchange_orders" sortable="custom" width="110px;"></el-table-column>
            <el-table-column label="拼团订单" prop="spell_orders" sortable="custom" width="110px;"></el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="goodsOrderChange"
            :current-page.sync="order_current_page"
            :page-sizes="pageSizeArray"
            :page-size="10"
            layout="sizes, prev, pager, next"
            :total="order_list_total_count">
          </el-pagination>
          </div>
      </div>
      <div class="statis-container" v-show="currentType==3">
        <div class="statis-num">
          <div class="statis-num_cell">
            <div class="data general">
              <div class="statis">
                <div class="price">{{activityCountData.send_goods_total}}</div>
              </div>
              <div class="des">总送出娃娃数</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{activityCountData.send_goods_today}}</div>
              </div>
              <div class="des">今日送出</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{activityCountData.send_goods_yesterday}}</div>
              </div>
              <div class="des">昨日送出</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{activityCountData.shipping_fee_total}}</div>
              </div>
              <div class="des">总快递</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{activityCountData.shipping_fee_today}}</div>
              </div>
              <div class="des">今日快递</div>
            </div>
            <div class="data general">
              <div class="statis">
                <div class="price">{{activityCountData.shipping_fee_yesterday}}</div>
              </div>
              <div class="des">昨日快递</div>
            </div>
          </div>
        </div>
   
        <div class="table-box">
          <el-table ref="orderTableRef" :data="activityData"  @sort-change="onSortActivityData">

            <el-table-column label="日期" prop="date" sortable="custom"></el-table-column>
            <el-table-column label="送出娃娃数" prop="send_goods" sortable="custom"></el-table-column>
            <el-table-column label="快递费用" prop="shipping_fee"></el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="goodsOrderChange"
            :current-page.sync="order_current_page"
            :page-sizes="pageSizeArray"
            :page-size="10"
            layout="sizes, prev, pager, next"
            :total="activityTotalCount">
          </el-pagination>
          </div>
      </div>      
    </div>
</template>
<script>
export default {
  name: "statis",
  components: {},
  data() {
    return {
      order_total_count: undefined,
      order_list_total_count: undefined,
      total_situation: {},
      order_today_count: "",
      order_yesterday_count: "",
      order_cached_count: "",
      order_catch_countt: "",
      order_exchange_count: "",
      spell_count: "",
      goods_id: "",
      goods_name: "",
      sc_name: "",
      sc: "",
      goodsList: [],
      currentType: "1",
      transactionList: [],
      transaction_total_count: 0,
      transaction_current_page: 1,
      transaction_per_page: 10,
      order_current_page: 1,
      order_per_page: 10,
      pageSizeArray: PageSizeArray,
      activityData: [
        {
          pv: 200,
          uv: 100,
          catch_pv: "2015-08-15"
        },
        {
          pv: 200,
          uv: 100,
          catch_pv: "2015-08-15"
        },
        {
          pv: 200,
          uv: 100,
          catch_pv: "2015-08-15"
        }
      ],
      activityCountData: {},
      activityTotalCount: 0
    };
  },
  methods: {
    handleClickChangeType(data) {
      this.currentType = data.type;
      this.$router.push({
        name: "statis",
        params: {
          type: data.type
        }
      });
    },

    onSortChange(data) {
      console.log(data);

      if (data.order !== "null") {
        data.order === "ascending"
          ? (this.sc = "asc")
          : data.order === "descending" ? (this.sc = "desc") : (this.sc = "");
      }

      if (data.prop !== "null") {
        this.sc_name = data.prop;
      } else {
        this.sc_name = "";
      }

      this.getOrderStatistic();
    },

    //查询操作
    searchData() {
      this.order_current_page = 1;
      this.sc_name = "";
      this.sc = "";
      this.$refs.orderTableRef.clearSort();
      this.getOrderStatistic();
    },

    //分页 翻页操作
    goodsOrderChange(page) {
      this.order_current_page = page;
      this.getOrderStatistic();
    },

    //分页 每页条数切换
    handleSizeChange(data) {
      this.currentType = this.$route.params.type;
      switch (this.currentType) {
        case "1":
          this.transaction_per_page = data;
          this.getBusinessStatistic();
          this.getGeneralSituation();
          break;
        case "2":
          this.order_per_page = data;
          this.getOrderStatistic();
          this.getOrderSituation();
          break;
      }
    },

    transactionPageChange(page) {
      this.transaction_current_page = page;
      this.getBusinessStatistic();
    },

    //统计订单
    getOrderStatistic() {
      let formData = new FormData();
      formData.append("page", this.order_current_page);
      formData.append("per_page", this.order_per_page);
      formData.append("goods_id", this.goods_id);
      formData.append("goods_name", this.goods_name);
      formData.append("sc_name", this.sc_name); //排序字段名
      formData.append("sc", this.sc); //排序规则，顺序 ‘asc’，倒序 ‘desc’
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=goods_order_statistic",
        "post",
        {},
        {},
        formData,
        succcess => {
          console.log(succcess.data);
          this.goodsList = succcess.data.list;
          this.order_list_total_count = succcess.data.total_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //统计交易
    getBusinessStatistic() {
      let formData = new FormData();
      formData.append("page", this.transaction_current_page);
      formData.append("per_page", this.transaction_per_page);
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=business_order_statistic_daily",
        "post",
        {},
        {},
        formData,
        succcess => {
          this.transaction_total_count = succcess.data.total_count;
          this.transactionList = succcess.data.list;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //统计订单列表
    getOrderSituation() {
      let formData = new FormData();
      formData.append("is_situation", 1);
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=order_situation",
        "post",
        {},
        {},
        formData,
        success => {
          console.log(success);
          this.order_total_count = success.data.total_count;
          this.order_today_count = success.data.today_count;
          this.order_yesterday_count = success.data.yesterday_count;
          this.order_cached_count = success.data.cached_count;
          this.order_catch_countt = success.data.catch_count;
          this.order_exchange_count = success.data.exchange_count;
          this.spell_count = success.data.spell_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    //获取交易额数据
    getGeneralSituation() {
      let formData = new FormData();
      formData.append("is_situation", 1);
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=index",
        "post",
        {},
        {},
        formData,
        success => {
          console.log(success);
          this.total_situation = success.data;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    // 获取萌娃活动数据
    getActivityData() {
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=wgxq_index",
        "post",
        {},
        {},
        {},
        success => {
          console.log(success);
          this.activityCountData = success.data;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    // 得到萌娃统计数据
    getActivityCountData(scName='',sc='') {
      let formData = new FormData();
      // 排序
      if (scName != "") {
        formData.append("sc_name", scName);
        formData.append("sc", sc);
      }
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=wgxq_statistics_daily",
        "post",
        {},
        {},
        formData,
        success => {
          console.log(success);
          this.activityData = success.data.list;
          this.activityTotalCount = success.data.total_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    // 萌娃数据排序
    onSortActivityData(data) {
      console.log(data);
      this.activityScName = data.prop;
      this.activitySc = data.order == "descending" ? "desc" : "asc";
      this.getActivityCountData(this.activityScName,this.activitySc);
    }
  },
  watch: {
    $route(to, from) {
      this.$nextTick(() => {
        this.currentType = to.params.type;
        switch (to.params.type) {
          case "1":
            this.getBusinessStatistic();
            this.getGeneralSituation();
            break;
          case "2":
            this.getOrderStatistic();
            this.getOrderSituation();
            break;
          case "3":
            this.getActivityData();
            this.getActivityCountData();
            break;
        }
      });
    }
  },
  created() {
    const currentRouteType = this.$router.currentRoute.params.type;
    this.currentType = this.$route.params.type;
    switch (this.currentType) {
      case "1":
        this.getBusinessStatistic();
        this.getGeneralSituation();
        break;
      case "2":
        this.getOrderStatistic();
        this.getOrderSituation();
        break;
      case "3":
        this.getActivityData();
        this.getActivityCountData();
        break;
    }
  },
  mounted() {}
};
</script>
<style lang="scss" rel="stylesheet/scss"  scoped>
.statis-model {
  width: 100%;
  height: 100%;
  padding-left: 118px;
  .statis-container {
    width: 100%;
    padding: 30px 70px 30px 50px;
    background: #f8f9fe;
    position: relative;
    .statis-num {
      width: 100%;
      min-width: 1200px;
      height: 210px;
      background: #fff;
      border: 1px solid #e6e8f4;
      display: flex;
      flex-direction: column;

      &.full {
        height: 260px;
      }

      .statis-num_cell {
        width: 100%;
        flex: 1;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        .data {
          width: 16.66%;
          .statis {
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            .price {
              font-size: 40px;
              color: #333;
            }
            .unit {
              font-size: 16px;
              color: #999;
            }
          }
          .des {
            margin-top: 6px;
            text-align: center;
            color: #999;
            font-size: 16px;
          }
        }
      }
    }
    .search-box {
      border: 1px solid #e6e8f4;
      // max-width: 1466px;
      min-width: 600px;
      width: 100%;
      height: 90px;
      margin-top: 38px;
      padding: 25px 30px;
      .elInput {
        display: block;
        width: 150px;
        font-size: 12px;
        color: #333;
        margin-right: 20px;
      }
      .labelName {
        height: 40px;
        line-height: 40px;
        color: #333;
        font-size: 14px;
      }
    }
    .table-box {
      width: 100%;
      // max-width: 1466px;
      background: #fff;
      border: 1px solid #e6e8f4;
      margin-top: 18px;
    }
  }
}
.pagination {
  width: 100%;
  text-align: right;
  margin-top: 20px;
}
.goodsDetail {
  .previewImg {
    width: 80px;
    height: 80px;
    > img {
      display: block;
      width: 100%;
      height: 100%;
      border: none;
      background: transparent;
    }
  }
  .goodsName {
    width: 120px;
    max-width: 120px;
    margin-left: 10px;
    color: #333;
    font-size: 12px;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
}
</style>
